<template>
  <div>
    <el-card class="box-card" style="margin: 10px 0px">
      <el-table  style="width: 100%" border :data="SpuList.records">
        <el-table-column label="序号" align="center" type="index" width="80"></el-table-column>
        <el-table-column  label="名称" prop="skuName" align="center"></el-table-column>
        <el-table-column  label="描述" prop="skuDesc" align="center"></el-table-column>
        <el-table-column  label="默认图片" prop="skuDefaultImg" width="120" align="center">
           <template slot-scope="{row,$index}">
              <img :src="row.skuDefaultImg" alt="" width="80px" height="80px">
          </template>
        </el-table-column>
        <el-table-column  label="重量(KG)" prop="weight" width="100" align="center"></el-table-column>
        <el-table-column  label="价格(元)" prop="price" width="80" align="center"></el-table-column>
        <el-table-column  label="操作" align="center" width="290">
          <template slot-scope="{row,$index}">
                <!-- el-icon-top -->
                 <el-button type="primary" icon="el-icon-edit" size="mini" v-show="false"></el-button>
            <el-button type="success" size="mini" icon="el-icon-bottom" v-show="row.isSale==0" @click="SetShow(row)"></el-button>
            <el-button type="success" size="mini" icon="el-icon-top" v-show="row.isSale==1" @click="SetShow2(row)"></el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit"></el-button>
            <el-button type="info" icon="el-icon-info" size="mini" @click="getSku(row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="RemoveSku(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- @size-change="handleSizeChange"
        @current-change="handleCurrentChange" -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="textAlign:center;margin-top:10px"
        :current-page="page"
        :page-sizes="[6, 10, 20]"
        :page-size.sync="limit"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="SpuList.total">
      </el-pagination>

      <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size='50%'>
          <el-form  label-width="160px">
              <el-form-item label="名称">
                  <template>
                    <span>{{getList.skuName}}</span>
                  </template>
              </el-form-item>
              <el-form-item label="描述">
                  <template >
                    <span>{{getList.skuDesc}}</span>
                  </template>
              </el-form-item>
               <el-form-item label="价格">
                  <template >
                    <span>{{getList.price}}元</span>
                  </template>
              </el-form-item>
                <el-form-item label="平台属性">
                  <template>
                    <el-tag
                      v-for="item in getList.skuAttrValueList"
                      :key="item.id"
                      type="success"
                      effect="dark"
                      style="margin-right:5px"
                      >
                      {{ item.valueName }}
                    </el-tag>
                  </template>
              </el-form-item>
              <el-form-item label="商品图片">
                  <template >
                        <el-carousel height="250px" style="width:300px">
                        <el-carousel-item v-for="item in getList.skuImageList" :key="item.id">
                              <img :src="item.imgUrl" alt="" width="300px" height="250px" >
                          </el-carousel-item>
                        </el-carousel>
                  </template>
              </el-form-item>
              
          </el-form>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
export default {
    name:'Sku',
    data() {
      return {
        page:1, //当前页
        limit:6,  //显示多少条数据展示
        SpuList:{},  //spu列表数据
        getList:{}, //sku列表数据
        drawer:false
      }
    },
    mounted() {
      this.GetSkuList()
    },
    methods:{
      //获取sku列表
      async GetSkuList(){
        let {page,limit} = this
        let result =  await this.$API.sku.productList(page,limit)
        if (result.code==200) {
          this.SpuList = result.data
        }
      },
      // 点击多少页
      handleCurrentChange(index){
        this.page = index
        this.GetSkuList()
      },
      // 点击显示多少页
      handleSizeChange(index){
        this.limit = index
        this.GetSkuList()
      },
      // 上架
      SetShow(row){
        row.isSale = 1
        this.$message({
          message: '恭喜你，上架成功',
          type: 'success',
          duration:1000
        });
      },
      // 下架
      SetShow2(row){
        row.isSale = 0
         this.$message({
          message: '恭喜你，下架成功',
          type: 'success',
          duration:1000
        });
      },
      //开发中
      edit(){
        this.$message({
            message:'正在开发中',
            duration:800
          })
      },
      //点击查看sku列表方法
      async getSku(row){
        let result =  await this.$API.sku.getSkuById(row.id);
        if (result.code == 200) {
          this.getList = result.data
          this.drawer = true
        }
      },
      async RemoveSku(row){
        let result = await this.$API.sku.deleteSku(row.id);
        if (result.code == 200) {
            this.$message({
              message: '恭喜你，删除成功',
              type: 'success',
              duration:500
          });
            if (this.SpuList.records.length<=1) {
              this.page = this.page-1
            }
            this.GetSkuList()
        }
      }
    }
}
</script>

<style>
.el-carousel__button{
  width: 20px;
}
.el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>